<template>
  <div class="recordDetail">
    <Navbar appTitle="订单详情" @ClickRight="$router.push('/application')" />
    <!--头部-->
    <div class="d-head">
      <div class="content">
        <div class="left">
          <div class="title">{{ detailInfo.orderCode || "-" }}</div>
          <div class="row">
            <span class="r-label">客户：</span>
            <span class="r-column" style="color: #191f25;">{{
              detailInfo.customName || "-"
            }}</span>
          </div>
        </div>
        <div class="right">
          <!-- <img class="rightImg" v-if="detailInfo.flowStatus == 'RUNNING'" src="@/assets/img/shenpizhong.png" alt="">
            <img class="rightImg" v-if="detailInfo.flowStatus == 'AGREE'" src="@/assets/img/yitongguo.png" alt="">
            <img class="rightImg" v-if="detailInfo.flowStatus == 'REFUSE'" src="@/assets/img/yijujue.png" alt="">
            <img class="rightImg" v-if="detailInfo.flowStatus == 'TERMINATED'" src="@/assets/img/yichehui.png" alt=""> -->
        </div>
      </div>
    </div>
    <!-- taps-->
    <div class="tabs-f">
      <van-tabs v-model="active" class="tabs-atv-class">
        <van-tab title="物品明细">
          <div class="goodsWrap">
            <div class="goodsList" v-if="orderList.length > 0">
              <div
                class="goodsBox"
                v-for="(item, index) in orderList"
                :key="index"
              >
                <div class="content">
                  <div class="icon"></div>
                  <div class="right">
                    <div class="top">
                      <p class="code">
                        {{ item.serialCode }}｜{{ item.serialName }}
                      </p>
                    </div>
                    <div class="rt-row">
                      <div class="column">
                        <span class="column-t">规格：</span>
                        <span class="column-c">{{
                          item.serialSpecifications || "-"
                        }}</span>
                      </div>
                    </div>
                    <div class="rt-row">
                      <div class="column">
                        <span class="column-t">单位：</span>
                        <span class="column-c">{{ item.unitName || "-" }}</span>
                      </div>
                    </div>
                    <div class="rt-row" style="margin-bottom: 0;">
                      <div class="column">
                        <span class="column-t">数量：</span>
                        <span class="column-c">{{
                          item.serialNumber || "-"
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <van-empty v-else description="物品明细为空" />
          </div>
        </van-tab>

        <van-tab title="自定义信息">
          <template #title>自定义信息</template>
          <!-- 自定义信息 -->
          <div class="otherTaps">
            <div class="content" v-if="formTypeExtendedFields.length > 0">
              <div
                class="row"
                v-for="(item, index) in formTypeExtendedFields"
                :key="index"
              >
                <span class="r-label">{{ item.fieldName }}：  {{ detailInfo.extDataJson[item.fieldKey] || "-" }}</span>
                <!-- <span class="r-column">
                  {{ detailInfo.extDataJson[item.fieldKey] || "-" }}
                </span> -->
              </div>
            </div>
            <van-empty v-else description="自定义信息为空" />
          </div>
        </van-tab>

        <van-tab>
          <template #title>生产工单</template>
          <div class="goodsWrap">
            <div class="goodsList" v-if="produceOrderInfoList.length > 0">
              <div
                class="goodsBox"
                v-for="(item, index) in produceOrderInfoList"
                :key="index"
              >
                <!-- <p class="title">盘点物品({{ index + 1 }})</p> -->
                <div class="content">
                  <div class="icon"></div>
                  <div class="right">
                    <div class="top">
                      <p class="code">
                        {{ item.serialNumber }}
                      </p>
                    </div>
                    <div class="rt-row">
                      <div class="column">
                        <span class="column-t">生产物品：</span>
                        <span class="column-c">
                          {{ item.serialName || "-" }} |
                          {{ item.serialSpecifications || "-" }}</span
                        >
                      </div>
                    </div>
                    <div class="rt-row">
                      <div class="column">
                        <span class="column-t">计划时间：</span>
                        <span class="column-c">{{
                          item.timePeriod || "-"
                        }}</span>
                      </div>
                    </div>
                    <div class="rt-row" style="margin-bottom: 0;">
                      <div class="column">
                        <span class="column-t">计划生产数量：</span>
                        <span class="column-c">{{
                          item.planProduceNum || "-"
                        }}</span>
                      </div>
                    </div>
                    <div class="pandianBox">
                      <div
                        class="status"
                        :style="{
                          color: orderStatusFn(item.orderStatus).color,
                          backgroundColor: orderStatusFn(item.orderStatus)
                            .bcColor,
                        }"
                      >
                        {{ orderStatusFn(item.orderStatus).text }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <van-empty v-else description="生产工单为空" />
          </div>
        </van-tab>

        <van-tab></van-tab>
      </van-tabs>
    </div>
    <!--提交按钮 -->
    <div v-if="$route.query.applyType == 'waiterDeal'" class="search-bottom">
      <span class="btncancel" @click="cancel">拒绝</span>
      <span class="btnconfirm" @click="confirm">同意</span>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import Examine from "@/components/examine";
import { getAction, postAction } from "@/api/manage";
import { apiBaseUrlDownload } from "@/utils/request";
import { formTypeExtendedFieldList } from "@/api/mobile";
import { APILX } from "@/api/requestLx";
const getFileListByIds = (params) =>
  getAction("/sys/common/getFileListByIds", params);
export default {
  name: "customerDetail", //客户详情
  components: { Navbar, Examine },
  data() {
    return {
      formTypeExtendedFields: [],
      produceOrderInfoList: [],
      orderList: [],
      abnormalList: [],
      normalList: [],
      allList: [],
      tabAbNormal: "0",
      tabNormal: "0",
      active: 0,
      detailInfo: {
        orderCode: "",
        extDataJson: [],
      },
      title: this.$route.meta.title,
      fileIds: "",
      imgUrlList: [],
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.detailInfo = this.$route.query.item;
    console.log(this.detailInfo);
    this.getDetail();
  },
  methods: {
    orderStatusFn(v) {
      if (v == 0) {
        return {
          text: "未开始",
          color: "#ff9900",
          bcColor: "#fff5e6",
        };
      } else if (v == 1) {
        return {
          text: "生产中",
          color: "#2B85E4",
          bcColor: "#EAF3FC",
        };
      } else if (v == 2) {
        return {
          text: "已完成",
          color: "#19BE6B",
          bcColor: "#E8F9F0",
        };
      } else if (v == 3) {
        return {
          text: "已取消",
          color: "#ff9900",
          bcColor: "#fff5e6",
        };
      } else {
        return {
          text: "-",
          color: "#ff9900",
          bcColor: "#fff5e6",
        };
      }
    },
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId },
      });
    },
    confirm() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
    // 获取详情
    async getDetail() {
      // 获取报工自定义表单字段;
      await formTypeExtendedFieldList({ formType: 2 }).then((res) => {
        if (res.code == 200 && res.result) {
          this.formTypeExtendedFields = res.result;
        }
      });
      let id = this.$route.query.id;
      APILX.saleOrderDetail(id).then((res) => {
        if (res.code == 200) {
          this.orderList = res.result.records;
        } else {
          this.$toast(res.message);
        }
      });

      APILX.produceOrderInfoList({ pageNo: 1, pageSize: 30 }).then((res) => {
        if (res.code == 200) {
          this.produceOrderInfoList = res.result.records;
        } else {
          this.$toast(res.message);
        }
      });
    },
    getTable(tabStatus) {
      let param = {
        id: this.$route.query.id,
        // id: "1517028753530834945",
        status: tabStatus,
        pageNo: "1",
        pageSize: "9999",
      };
      (this.abnormalList = []),
        (this.normalList = []),
        (this.allList = []),
        APILX.getWmsInventoryGoodsList(param).then((res) => {
          if (res.code == 200) {
            this.listData(res.result.records);
            let tableData = res.result.records;
            if (param.status == "abnormal") {
              this.tabAbNormal = res.result.total;
              this.abnormalList = tableData;
            } else if (param.status == "normal") {
              this.tabNormal = res.result.total;
              this.normalList = tableData;
            } else {
              this.allList = tableData;
            }
          } else {
            this.$toast(res.message);
          }
        });
    },
    getimgUrl(v) {
      let itemObj = {};
      for (let item of this.imgUrlList) {
        if (item.id == v) {
          itemObj = item;
        }
      }
      return itemObj.url;
    },
    //获取图片地址
    async listData(v) {
      console.log(v, "列表所有数据2");
      for (let i = 0; i < v.length; i++) {
        await getFileListByIds({ ids: v[i].attachment }).then((res) => {
          if (res.code == 200) {
            if (res.result.length > 0) {
              this.imgUrlList.push({
                url: `${apiBaseUrlDownload}jksaas-mgt/mgt/${res.result[0].uri}`,
                id: v[i].goodsId,
              });
            } else {
              this.imgUrlList.push({
                url: require("../../../assets/img/noPicture.jpg"),
                id: v[i].goodsId,
              });
            }
          } else {
          }
        });
      }
    },
    setColor(item) {
      if (
        Number(item.inventoryGoodsQualifiedNum) > Number(item.goodsQualifiedNum)
      ) {
        return "#ff4d4f";
      } else {
        return "#00b042";
      }
    },
    setColor2(item) {
      if (Number(item.inventoryGoodsScrapNum) > Number(item.goodsScrapNum)) {
        return "#ff4d4f";
      } else {
        return "#00b042";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/workManagement/materialRequisition/materialDetail.scss";
.tabs-style {
  width: 600px;
  margin: 0 0 0 -22px;
}
/deep/.van-tabs__line {
  width: 160px;
}
.otherTaps {
  background: #ffffff;
  padding: 32px;
  margin-top: 20px;
  .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
    .icon {
      display: inline-block;
      width: 6px;
      height: 28px;
      background: #1890ff;
    }
    .content {
      width: 126px;
      height: 32px;
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #191f25;
      line-height: 44px;
      margin-left: 20px;
    }
  }
  .content {
    .row {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      margin-top: 32px;
      display: flex;
      .r-label {
        color: #888888;
        display: block;
        // max-width: 5rem;
        word-break: break-word;
        // width: 0.7rem;
        //   border: 1px solid red;
      }
      .r-column {
        word-break: break-word;
        display: block;
        color: #191f25;
        width: 4.8rem;
        padding-left: 2px;
        //   border: 1px solid red;
        //    width: 1rem;
      }
    }
    .fhrow {
      display: flex;
      .fhImg {
        width: 110px;
        height: 110px;
        border-radius: 20px;
      }
      .rt-column {
        width: 510px;
        //   height: 2.55rem;
        margin-left: 40px;
        .rt-title {
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          margin-bottom: 32px;
        }
        .rt-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 46px;
          .column {
            //    border: 1px solid red;
            width: 300px;
            .column-t {
              font-size: 28px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #888888;
              display: block;
              width: 100%;
              margin-bottom: 6px;
            }
            .column-c {
              font-size: 32px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #191f25;
              display: block;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
.tabs-atv-class {
  width: 100%;
  margin: 0 0 0rem 0rem;
}

.content {
  margin-left: 0 !important;
}

.rt-row {
  margin-bottom: 20px;

  .column {
    width: 100%;
    display: flex;

    .column-t {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      // margin-bottom: 0.03rem;
    }

    .column-c {
      flex: 1;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      /* （超出限定的宽度就隐藏内容) */
      overflow: hidden;
      /* （设置文字在一行显示不能换行） */
      white-space: nowrap;
      /* （规定当文本溢出时显示省略符） */
      text-overflow: ellipsis;
    }
  }
}

// 盘点物品样式
.goodsWrap {
  // margin-top: -0.1rem;
  //   不换行
  // white-space: nowrap;
  overflow: scroll;
  height: 77vh;

  //   height: 4.9rem;
  .goodsList {
    .total {
      background: #f5f8ff;
      padding: 30px;
      color: #888888;
      font-size: 28px;
      margin-bottom: -20px;
    }

    .goodsBox {
      background: #fff;
      margin-top: 20px;

      .title {
        color: #191f25;
        font-weight: bold;
        font-size: 32px;
        border-bottom: 2px solid #f5f5f5;
        padding: 30px;
        margin: 0;
        margin-bottom: 32px;
      }

      .content {
        display: flex;
        padding: 30px;
        border-bottom: 2px solid #f5f5f5;

        .icon {
          width: 6px;
          height: 32px;
          background: #1890ff;
          margin-top: 6px;
          margin-right: 20px;
        }

        .right {
          // width: 56px;

          // margin-left: 0.15rem;
          .top {
            display: flex;
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;

            .code {
              width: 560px;
              margin-bottom: 16px;
              word-break: break-word;
              /* 文本行的任意字内断开 */

              word-wrap: break-word;
              /* IE */

              white-space: -moz-pre-wrap;
              /* Mozilla */

              white-space: -hp-pre-wrap;
              /* HP printers */

              white-space: -o-pre-wrap;
              /* Opera 7 */

              white-space: -pre-wrap;
              /* Opera 4-6 */

              white-space: pre;
              /* CSS2 */

              white-space: pre-wrap;
              /* CSS 2.1 */

              white-space: pre-line;
              /* CSS 3 (and 2.1 as well, actually) */
            }

            img {
              height: 36px;
              margin-top: 6px;
              //   float: right;
            }
          }

          .btn {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            div {
              width: 50%;

              .key {
                font-size: 28px;
                color: #8888;
                margin-bottom: 10px;
              }

              .val {
                color: #191f25;
                font-size: 32px;
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }
  }

  .addgoods {
    background: #fff;
    font-size: 32px;
    text-align: center;
    height: 100px;
    line-height: 100px;
  }
}

.left {
  width: 680px;
}

.recordDetail {
  position: relative;
}

.tabs-f {
  position: relative;
  top: 160px;
  width: 100% !important;
}

// /deep/ .van-tabs__nav{
//     height: 0.44rem;
//     width: 100%;
// }
.van-tab__pane {
  //     position: fixed;
}

.row {
  margin-top: 20px !important;
}

// /deep/ .van-tabs__nav {
//   left: -35px;
// }
/deep/ .van-tabs__wrap {
  background: #fff;
}

div.pandianBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  top: -12px;
}

div.pandianResult {
  font-size: 22px;
  margin-top: 4px;
  color: #ff6c6c;
}
</style>
